import { Button, Col, Form, Input, Modal, Row, Table,Select, message, Calendar, Tooltip, Tag, Avatar } from 'antd'
import React, { useRef, useState } from 'react'
import { CopyOutlined,CopyrightOutlined ,WhatsAppOutlined,CloseCircleOutlined,FormOutlined} from '@ant-design/icons';
import { baseURL } from '../../../../api/request';
import { roleList } from '../../../../utils';
import { ajax } from '../../../../api';
const {Option} = Select 
const { TextArea } = Input;

export default function Weiscore(props: any) {


    const {studentList_filter,getScoreList}=props
    const columns:any = [
        {
          title: '序号',
          dataIndex: '_v',
          render:(text:any,item:any,index:any)=>{
            return index+1
          },
          align:'center',
          width:'80px'
          
        },   
        {
          title: '头像',
          align:'center' ,
          render(value:any,item:any,index:any){
            return (
              item.avatar?<Avatar src={item.avatar.replace(/public/,baseURL)} />:<Avatar src={require('../../../../assets/images/xiaoxin_2.jpg')}></Avatar>
            )
          },
          width:'80px',
          
        }, 
          {
            title:"用户名"  ,
            align:'center' ,
            dataIndex:"username",
            width:'100px',
            ellipsis:true
          },
          {
            title:"权限"  ,
            align:'center' ,
            width:"80px",
            render(value:any,item:any,index:any){
              return (
                <Tag color={roleList.find(item=>item.value==value.role)?.color}>
                  {roleList.find(item=>item.value==value.role)?.label}
                </Tag>
              )
            }
          },
          {
            title:"联系电话"  ,
            align:'center' ,
            dataIndex:"phone",
            width:'100px',
            ellipsis:true
          },
          {
            title:"操作"  ,
            align:'center' ,
            width:"80px",
            render(value:any,item:any,index:any){
              return (
               <div>
                 <Tooltip title="点击添加成绩">
                      <Button  size="small" onClick={()=>addScore(item)} shape="circle" icon={<FormOutlined />} type="primary"></Button>
                  </Tooltip>
               </div>
              )
            }
          },
       
     
      ];
       //控制弹窗显示
  const [show,setShow] = useState<boolean>(false)
  const [id,setId]=useState()
  const [studentUinfo,setUinfo]=useState()
  const [form] = Form.useForm()
  const handleOk=()=>{
     //获取表单的值
     //根据添加对象的id查询用户信息
    
     form.validateFields().then(value=>{
         value.info=studentUinfo
            console.log(value);
        //加入人数表
        ajax.addscore(value).then(res=>{
            if(res.code==200){
                setShow(false)
            }
        })
            
     })
   
  }
  const handleCancel=()=>{
      setShow(false)
    
  }
  //添加成绩弹出修改框
  const addScore=(item:any)=>{
    setShow(true)
    console.log(item._id);
    
    setId(item._id)
    
    console.log(id);
    ajax.getstudentinfo({id:item._id}).then(res1=>{ 
        console.log(res1);
        setUinfo(res1.result)
        getScoreList()
    })
  }

  return (
    <div>
       
       <Table dataSource={studentList_filter} rowKey={record => record._id} columns={columns} pagination={{pageSize:4}} /> 
       <Modal  
            title="添加成绩" 
            visible={show} 
            onOk={handleOk} 
            onCancel={handleCancel}
            okText="确定添加"
            cancelText="取消"
            okType="danger"
        >
          
          <Form
          name="basic"
          form={form}
          layout={"vertical"}
          >
        <Form.Item
            name="score"
            label="德育成绩"
            rules={[{ required: true, message: '请输入该生的德育成绩' },{pattern:/^\d{2}$/,message:"满分为100"}]}
          >
            <Input 
          prefix={<CopyrightOutlined />}
          placeholder="请输入德育成绩"
          allowClear
          />
          </Form.Item>
          
           
        </Form>
          
        </Modal>
    </div>
  )
}
